import React, { Component } from 'react';
import { Link } from 'dva/router';
import autoBind from 'react-autobind';
import { List } from 'antd-mobile';

import styles from './index.css';
import IconfontStyle from '../../../../assets/iconfont/iconfont.css';

class HomeHot extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    
    componentDidMount() {
    	const { dispatch } = this.props
    	dispatch({type: 'meyley/fetchHotProductions'})
    }
	render() {
		const { meyley } = this.props
	 	return (	
	 		<div className={styles['home-hot']}>
	 			<div className={styles['home-hot-title']}>
	 				<img src={require(`../../../../assets/home/hot.png`)} style={{marginRight: '0.10rem', width: '0.27rem', height: '0.35rem', position: 'relative', top: '0.06rem'}}/>
 					最新热卖
 				</div>
 				{
 					meyley.hotProductions ? (
 						meyley.hotProductions.goodsList.map((productions, k) => {
 							return <div key={k} className={styles['home-hot-item']}>
		 						{
		 							productions.map((production, i) => {
		 								let isDefaultClassName = production.isDefault ? styles['home-hot-item-production-default'] : ''
		 								return production.goodsId ? (
		 									<Link key={i} to={`/production/detail/${production.goodsId}`} className={`${styles['home-hot-item-production']} ${isDefaultClassName}`}>
			 									<img className={styles['home-hot-item-production-img']} src={production.goodsThumb} style={{width: '2.00rem', height: '1.60rem'}} />
			 									<span className={styles["home-hot-item-production-title"]}>
			 									{production.goodsName}
			 									</span>
			 									<span className={styles["home-hot-item-production-price"]}>
			 									￥{production.shopPrice}
			 									</span>
			 								</Link>
		 									) : (null)
		 							})
		 							
		 						}
		 					</div>
 						})
 						) : (<div style={{color: '#191919', fontSize: '0.3rem', padding: '0.24rem'}} >暂无数据</div>)
 				}
	 			<div className="home-hot-bottom" style={{padding: '0.12rem', background: '#F7F7F7', textAlign: 'center'}}>
	 				<Link to="/category" style={{color: '#666', fontSize: '0.24rem'}}>
	 					<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-download']}`} style={{fontSize: '0.24rem', marginRight: '0.06rem'}}/>
	 					点击查看更多商品
	 				</Link>
	 			</div>
	 		</div>
	  	);
	}
};

HomeHot.propTypes = {
};

export default HomeHot
